<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
          <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
            <div class="report_header_date">
              <el-date-picker
                style="width: 100%;"
                v-model="query.date"
                value-format="yyyy-MM-dd"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </div>
          <div>
            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryAd">查询</el-button>
           </div>
        </div>
      </div>
    </el-header>
    <div class="pd10">
      <el-table
        :data="adForm"
        border
        v-loadMore="[payLoads,'promotion-list']"
        style="width: 100%">
        <el-table-column
          label="排序"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="签到日期"
          width="100">
          <template slot-scope="{row}">
            <span>{{row.createDate | dateFormatter}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="客户名称"
          width="200">
          <template slot-scope="{row}">
            <span>{{row.memberName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="签到天数"
          width="80"
        >
          <template slot-scope="{row}">
            <span>{{row.current}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="签到奖品"
        >
          <template slot-scope="{row}">
            <span>{{row.signInGift.rewardName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="80" >
          <template slot-scope="scope">
            <div>
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-permission="['promotion6.del']">
                <a style="margin-left: 10px" @click="deleteAd(scope.row)">
                  <i style="color: #F56C6C" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-footer class="el-footerBox">
      <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadPromotion"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
import Pagination from '@/components/Pagination';
import {EventBus} from '@/api/eventBus'
import loadMore from '@/utils/loadMore.js'
import permission from '@/directive/permission/index.js' // 权限判断指令
import elDragDialog from '@/directive/el-drag-dialog'
import {  list,del  } from '@/api/signInRecord'
import utils from '../../../utils/utils.js'
export default {
  directives: {elDragDialog,permission,loadMore},
  name: 'freeshipping-list',
  activated() {
    this.payLoads = new Date().getTime();
  },
  data(){
    return{
      id:'',
      value:'',
      total:0,
      payLoads:'',
      editVisible:false,
      clicked:false,
      hidden:false,
      adForm:[],
      queryType:true,
      giftTypeList:[],
      pageNum:1,
      query: {
        title: '',
        date:[]
      },
      keyword: {
        title: '',
        date:[]
      },
      pickerOptions: {//时间快捷选择
        shortcuts: [{
          text: '昨天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      pageSize:20,
    }
  },
  components:{Pagination},
  created() {
    this.loadPromotion()
  },

  filters:{
    watchType(val){
      const  typeName=['新人礼','消费送','扫码送','满减','满折','满赠','满包邮','充值送'];
      return typeName[val];
    },
    watchFirsted(val){
      if (val===true){
        return '有限'
      }else if (val ===false){
        return '不限'
      }
    },
    watchOverlying(val){
      if (val===true){
        return '允许叠加'
      }else if (val ===false){
        return '不允许叠加'
      }
    },
    watchGiftType(val){
      if (val==0){
        return '礼品'
      }else if (val ==1){
        return '优惠券'
      }
    },
    watchAmountType(val){
      if (val==3){
        return '满减金额'
      }else if (val==7){
        return '充值金额'
      }
    }
  }
  ,
  methods:{
    //下载模板的函数
    handleExport(id) {
      let _this= this
      //要导出函数携带的参数
      //要导出函数携带的参数
      let data ={}
      data.tHeader = ["编码","二维码"]
      data.filterVal = ["code","q"]
      data.filename = "扫码活动";
      exportQrcode({
        promotionId:id.id
      }).then(res=>{
        data.list=res.data
        _this.$refs.exportList2Excel.handleDownload(data)
      }).catch(error=>{
        _this.$refs.exportList2Excel.unlockLoading()
      })
      this.$refs.exportList2Excel.handleDownload(data);
    },
    resetAd() {
      this.value='';
      this.query.title = '';
      this.query.date=[];
      this.keyword = this.query;
      this.pageNum = 1;
      this.loadPromotion()
    },
    queryAd(){
      this.keyword = this.query;
      this.pageNum = 1
      this.loadPromotion()
    },
    loadPromotion(){
      if(utils.isNull(this.keyword.date)){
        this.keyword.date = []
      }
      if(utils.isNull(this.value)){
        this.value = ''
      }
      if(utils.isNull(this.keyword.title)){
        this.keyword.title= ''
      }
      this.id = this.$route.query.id;
      let params = new URLSearchParams();
      params.append('pageNum', this.pageNum);
      params.append('pageSize', this.pageSize);
      params.append('signInId', this.id);
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '');
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '');
      list(params).then(response =>{
        this.adForm=response.data.data
        this.total = response.data.total
      }).catch(error =>{
        console.log('error!!')
      })
    },

    deleteAd(data) {
      console.log(data)
      var _this = this;
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(data.id).then(response => {
          console.log(response)
          _this.adForm.forEach(function (item, index) {
            if (item.id == data.id) {
              _this.adForm.splice(index, 1)
            }
          });
          _this.$message({
            message: response.content,
            offset: 120,
            center: true
          });

        }).catch(error => {
          console.log('error!!')
        });
      }).catch(() => {
      })
    },
    recordClick(){
      this.$router.push({
        path: '/signin/record'
      })
    },
    addClick(){
      this.$router.push({
        path: '/signin/add'
      })
    },
    editClick(row){
      this.$router.push({
        path: '/signin/edit', query: {id: row.id}
      })
    },
    findPromotion(){
      find(this.editPromotion.id).then(response =>{
        this.editPromotion=response.data.promotion;
      })
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            _this.curHeight = h - 266//减去页面上固定高度height
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            _this.curHeight = h - 220//减去页面上固定高度height
          }
        })();
      };
    },
    comeIn() {
      var h = document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 220//减去页面上固定高度height
    },
    chooseClick() {
      this.queryType = !this.queryType
      if (this.queryType == false) {
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 266//减去页面上固定高度height
      } else {
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220//减去页面上固定高度height
      }
    },
  },
}
</script>

<style scoped>
.popup_content {
  padding-bottom: 0px !important;
}
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #eeeeee;
}

/deep/ .el-dialog__header {
  border: 1px solid #eeeeee !important;
  padding: 15px !important;
}

/deep/ .el-dialog__body {
  padding: 0px 20px !important;
}

.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/.el-header {
  padding: 10px;
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}
.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}
.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
</style>
